<div class="box">
    <div class="box-header">
        <h3 class="box-title">
            <i class="fa {$info.icon|default='fa-folder'}"></i> 
            分类详情 - {$info.name}
        </h3>
        <div class="box-tools">
            <ob_link><a class="btn btn-primary btn-sm" href="{:url('categoryEdit', array('id' => $info['id']))}"><i class="fa fa-edit"></i> 编辑</a></ob_link>
            <ob_link><a class="btn btn-success btn-sm" href="{:url('categoryAdd', array('parent_id' => $info['id']))}"><i class="fa fa-plus"></i> 添加子分类</a></ob_link>
            <a class="btn btn-default btn-sm" href="{:url('categorylist')}"><i class="fa fa-arrow-left"></i> 返回列表</a>
        </div>
    </div>
    
    <div class="box-body">
        <div class="row">
            <!-- 基本信息 -->
            <div class="col-md-6">
                <div class="info-box">
                    <span class="info-box-icon bg-blue">
                        <i class="fa {$info.icon|default='fa-folder'}"></i>
                    </span>
                    <div class="info-box-content">
                        <span class="info-box-text">分类名称</span>
                        <span class="info-box-number">{$info.name}</span>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="info-box">
                    <span class="info-box-icon bg-green">
                        <i class="fa fa-sitemap"></i>
                    </span>
                    <div class="info-box-content">
                        <span class="info-box-text">层级深度</span>
                        <span class="info-box-number">第 {$info.level + 1} 级</span>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="info-box">
                    <span class="info-box-icon bg-yellow">
                        <i class="fa fa-sort-numeric-asc"></i>
                    </span>
                    <div class="info-box-content">
                        <span class="info-box-text">排序值</span>
                        <span class="info-box-number">{$info.sort}</span>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="info-box">
                    <span class="info-box-icon {if condition='$info.status eq 1'}bg-green{else/}bg-red{/if}">
                        <i class="fa {if condition='$info.status eq 1'}fa-check{else/}fa-times{/if}"></i>
                    </span>
                    <div class="info-box-content">
                        <span class="info-box-text">状态</span>
                        <span class="info-box-number">
                            {if condition="$info.status eq 1"}
                                <span class="badge bg-green">启用</span>
                            {else/}
                                <span class="badge bg-red">禁用</span>
                            {/if}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <!-- 路径信息 -->
            <div class="col-md-12">
                <div class="box box-primary">
                    <div class="box-header">
                        <h3 class="box-title"><i class="fa fa-map-marker"></i> 分类路径</h3>
                    </div>
                    <div class="box-body">
                        <ol class="breadcrumb" style="margin-bottom: 0;">
                            {volist name="info.breadcrumbs" id="breadcrumb"}
                            <li>
                                <i class="fa {$breadcrumb.icon|default='fa-folder'}"></i>
                                {if condition="$breadcrumb.id != $info.id"}
                                    <ob_link><a href="{:url('detail', array('id' => $breadcrumb['id']))}">{$breadcrumb.name}</a></ob_link>
                                {else/}
                                    <strong>{$breadcrumb.name}</strong>
                                {/if}
                            </li>
                            {/volist}
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        
        {if condition="!empty($info.description)"}
        <div class="row">
            <!-- 描述信息 -->
            <div class="col-md-12">
                <div class="box box-success">
                    <div class="box-header">
                        <h3 class="box-title"><i class="fa fa-file-text-o"></i> 分类描述</h3>
                    </div>
                    <div class="box-body">
                        <p>{$info.description|nl2br}</p>
                    </div>
                </div>
            </div>
        </div>
        {/if}
        
        <div class="row">
            <!-- 子分类列表 -->
            <div class="col-md-12">
                <div class="box box-warning">
                    <div class="box-header">
                        <h3 class="box-title">
                            <i class="fa fa-folder-open"></i> 
                            子分类 
                            <span class="badge bg-blue">{$info.children_count|default=0}</span>
                        </h3>
                        <div class="box-tools">
                            <ob_link><a class="btn btn-success btn-sm" href="{:url('categoryAdd', array('parent_id' => $info['id']))}"><i class="fa fa-plus"></i> 添加子分类</a></ob_link>
                        </div>
                    </div>
                    <div class="box-body">
                        {if condition="!empty($info.children)"}
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th width="60">ID</th>
                                        <th width="40">图标</th>
                                        <th>分类名称</th>
                                        <th width="80">排序</th>
                                        <th width="100">状态</th>
                                        <th width="150">创建时间</th>
                                        <th width="150">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {volist name="info.children" id="child"}
                                    <tr>
                                        <td>{$child.id}</td>
                                        <td>
                                            <i class="fa {$child.icon|default='fa-folder'}"></i>
                                        </td>
                                        <td>
                                            <ob_link><a href="{:url('detail', array('id' => $child['id']))}">{$child.name}</a></ob_link>
                                            {if condition="$child.children_count > 0"}
                                                <span class="badge bg-blue">{$child.children_count}</span>
                                            {/if}
                                        </td>
                                        <td>{$child.sort}</td>
                                        <td>
                                            {if condition="$child.status eq 1"}
                                                <span class="badge bg-green">启用</span>
                                            {else/}
                                                <span class="badge bg-red">禁用</span>
                                            {/if}
                                        </td>
                                        <td>{$child.create_time_text}</td>
                                        <td>
                                            <ob_link><a href="{:url('categoryEdit', array('id' => $child['id']))}" class="btn btn-xs btn-primary"><i class="fa fa-edit"></i></a></ob_link>
                                            <ob_link><a href="{:url('detail', array('id' => $child['id']))}" class="btn btn-xs btn-info"><i class="fa fa-eye"></i></a></ob_link>
                                        </td>
                                    </tr>
                                    {/volist}
                                </tbody>
                            </table>
                        </div>
                        {else/}
                        <div class="text-center" style="padding: 30px;">
                            <i class="fa fa-folder-open-o fa-3x text-muted"></i>
                            <p class="text-muted" style="margin-top: 15px;">暂无子分类</p>
                            <ob_link><a href="{:url('categoryAdd', array('parent_id' => $info['id']))}" class="btn btn-primary">添加子分类</a></ob_link>
                        </div>
                        {/if}
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <!-- 时间信息 -->
            <div class="col-md-12">
                <div class="box box-info">
                    <div class="box-header">
                        <h3 class="box-title"><i class="fa fa-clock-o"></i> 时间信息</h3>
                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>创建时间：</strong>{$info.create_time_text|default='暂无'}</p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>更新时间：</strong>{$info.update_time_text|default='暂无'}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.info-box {
    margin-bottom: 15px;
}

.breadcrumb {
    background-color: #f5f5f5;
    border-radius: 4px;
}

.breadcrumb li {
    color: #666;
}

.breadcrumb li a {
    color: #3c8dbc;
    text-decoration: none;
}

.breadcrumb li a:hover {
    color: #23527c;
    text-decoration: underline;
}

.box {
    margin-bottom: 20px;
}

.table th {
    background-color: #f9f9f9;
}
</style>